
<!doctype html>
<html lang="zh" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="../../%E7%BB%BC%E5%90%88%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B/">
      
      
        <link rel="next" href="../readme_zh/">
      
      
      <link rel="icon" href="../../../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.12">
    
    
      
        <title>Readme en - CodeLabs(博客临时站点)</title>
      
    
    
      <link rel="stylesheet" href="../../../assets/stylesheets/main.7e359304.min.css">
      
        
        <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
    <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#table-of-contents" class="md-skip">
          跳转至
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="页眉">
    <a href="../../.." title="CodeLabs(博客临时站点)" class="md-header__button md-logo" aria-label="CodeLabs(博客临时站点)" data-md-component="logo">
      
  <img src="../../../OTHERS/dancehole.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            CodeLabs(博客临时站点)
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Readme en
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="切换至夜间模式"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="切换至夜间模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="cyan"  aria-label="切换至日间模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="切换至日间模式" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
    
      <div class="md-header__source">
        <a href="https://gitee.com/dancehole/code-labs" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    dancehole/CodeLabs
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="导航栏" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../../.." title="CodeLabs(博客临时站点)" class="md-nav__button md-logo" aria-label="CodeLabs(博客临时站点)" data-md-component="logo">
      
  <img src="../../../OTHERS/dancehole.png" alt="logo">

    </a>
    CodeLabs(博客临时站点)
  </label>
  
    <div class="md-nav__source">
      <a href="https://gitee.com/dancehole/code-labs" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    dancehole/CodeLabs
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../.." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Home
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../README_en/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    README en
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
        
          
          <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Git
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            Git
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/github%2BpicGo%E5%9B%BE%E5%BA%8A/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    github+picGo图床
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/git%E5%BE%BD%E6%A0%87/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    GitHub项目徽标 - 知乎
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/%E4%B8%80%E6%96%87git%E6%95%99%E5%AD%A6/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    GIT版本管理看这一篇就够了 - 简书
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/%E4%BC%98%E9%9B%85%E7%9A%84%E6%B7%BB%E5%8A%A0.gitignore/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    VS Gitignore 示例：
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/%E5%85%B3%E4%BA%8Egit%E9%80%89license/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    如何快速选择开源许可证License，看这三个就够了_copyright-CSDN博客
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/%E5%A6%82%E4%BD%95%E4%BC%98%E9%9B%85%E7%9A%84%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84%E4%BB%A3%E7%A0%81%E4%B8%8A%E4%BA%91/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    如何优雅的给自己的代码上云
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/%E5%A6%82%E4%BD%95%E4%BC%98%E9%9B%85%E7%9A%84%E8%BF%9B%E8%A1%8C%E8%BF%9C%E7%A8%8B%E5%8D%8F%E4%BD%9C/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    如何优雅的进行远程协作
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Git/%E8%B4%A1%E7%8C%AE%E6%96%87%E6%A1%A3/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    贡献文档
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
        
          
          <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Linux UsefulCommands
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_4">
            <span class="md-nav__icon md-icon"></span>
            Linux UsefulCommands
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../Linux-UsefulCommands/%E7%A8%8B%E5%BA%8F%E6%94%BE%E5%85%A5%E5%90%8E%E5%8F%B0%E8%BF%90%E8%A1%8C/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    程序放入后台运行
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked>
        
          
          <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Markdown
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            Markdown
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Blog%E6%95%99%E7%A8%8B/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    基于Mkdocs+mkdocs-material+gitcus+gitee/github page+..的个人博客页
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../%5B51cto%5DMarkdown%E7%94%A8%E6%B3%95/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    [51cto]Markdown用法
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../%5Bcsdn%5Dmarkdown%E6%9C%80%E5%85%A8%E8%AF%AD%E6%B3%95/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    [csdn]markdown最全语法
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../%5Bhtml%E6%89%A9%E5%B1%95%5Dmarkdown%E6%89%A9%E5%B1%95%E8%AF%AD%E6%B3%95/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    [html扩展]markdown扩展语法
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../%5B%E6%B5%81%E7%A8%8B%E5%9B%BE%5D%E5%BC%80%E6%BA%90%E4%B8%89%E4%BB%B6%E5%A5%97-markdown%E6%89%A9%E5%B1%95/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    [流程图]开源三件套 markdown扩展
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../%E5%BC%80%E6%BA%90%E4%B8%89%E4%BB%B6%E5%A5%97%E4%B9%8B%E4%B8%80-Markdown/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    开源三件套之一 Markdown
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../%E7%BB%BC%E5%90%88%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    应用实例：好看的主页
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_8" checked>
        
          
          <label class="md-nav__link" for="__nav_5_8" id="__nav_5_8_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    README模板
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_8_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_5_8">
            <span class="md-nav__icon md-icon"></span>
            README模板
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    Readme en
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    Readme en
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#table-of-contents" class="md-nav__link">
    <span class="md-ellipsis">
      📝 Table of Contents
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#demo" class="md-nav__link">
    <span class="md-ellipsis">
      🤯 Demo 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#prerequisites" class="md-nav__link">
    <span class="md-ellipsis">
      ✅ Prerequisites 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#install" class="md-nav__link">
    <span class="md-ellipsis">
      ⬇️ Install 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#setup" class="md-nav__link">
    <span class="md-ellipsis">
      🛠 Setup 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🛠 Setup">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#intersectionobserver" class="md-nav__link">
    <span class="md-ellipsis">
      IntersectionObserver
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scroll-listener" class="md-nav__link">
    <span class="md-ellipsis">
      Scroll listener
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#usages" class="md-nav__link">
    <span class="md-ellipsis">
      🖼 Usages 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🖼 Usages">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#background-images" class="md-nav__link">
    <span class="md-ellipsis">
      Background images
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#responsive-images" class="md-nav__link">
    <span class="md-ellipsis">
      Responsive images
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#loading-image-path-async" class="md-nav__link">
    <span class="md-ellipsis">
      Loading image path async
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#custom-observable" class="md-nav__link">
    <span class="md-ellipsis">
      Custom observable
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ionic" class="md-nav__link">
    <span class="md-ellipsis">
      Ionic
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#debug" class="md-nav__link">
    <span class="md-ellipsis">
      🐛 Debug 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#css" class="md-nav__link">
    <span class="md-ellipsis">
      💅 CSS 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#api" class="md-nav__link">
    <span class="md-ellipsis">
      🔄 API 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🔄 API">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#lazyload" class="md-nav__link">
    <span class="md-ellipsis">
      lazyLoad
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#defaultimage-optional" class="md-nav__link">
    <span class="md-ellipsis">
      defaultImage (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#errorimage-optional" class="md-nav__link">
    <span class="md-ellipsis">
      errorImage (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#offset-optional" class="md-nav__link">
    <span class="md-ellipsis">
      offset (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scrolltarget-optional" class="md-nav__link">
    <span class="md-ellipsis">
      scrollTarget (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#customobservable-optional" class="md-nav__link">
    <span class="md-ellipsis">
      customObservable (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#usesrcset-optional" class="md-nav__link">
    <span class="md-ellipsis">
      useSrcset (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#decode-optional" class="md-nav__link">
    <span class="md-ellipsis">
      decode (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#debug-optional" class="md-nav__link">
    <span class="md-ellipsis">
      debug (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#events" class="md-nav__link">
    <span class="md-ellipsis">
      Events
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Events">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#onstatechange-optional" class="md-nav__link">
    <span class="md-ellipsis">
      onStateChange (optional) 
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#hooks" class="md-nav__link">
    <span class="md-ellipsis">
      🎣 Hooks 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🎣 Hooks">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#getobservable" class="md-nav__link">
    <span class="md-ellipsis">
      getObservable
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isvisible" class="md-nav__link">
    <span class="md-ellipsis">
      isVisible
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#loadimage" class="md-nav__link">
    <span class="md-ellipsis">
      loadImage
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#setloadedimage" class="md-nav__link">
    <span class="md-ellipsis">
      setLoadedImage
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#seterrorimage" class="md-nav__link">
    <span class="md-ellipsis">
      setErrorImage
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#setup_1" class="md-nav__link">
    <span class="md-ellipsis">
      setup
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#finally" class="md-nav__link">
    <span class="md-ellipsis">
      finally
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isbot" class="md-nav__link">
    <span class="md-ellipsis">
      isBot
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isdisabled" class="md-nav__link">
    <span class="md-ellipsis">
      isDisabled
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#skiplazyloading" class="md-nav__link">
    <span class="md-ellipsis">
      skipLazyLoading
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#onattributechange" class="md-nav__link">
    <span class="md-ellipsis">
      onAttributeChange
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ondestroy" class="md-nav__link">
    <span class="md-ellipsis">
      onDestroy
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#search-engine-optimization-seo" class="md-nav__link">
    <span class="md-ellipsis">
      🔎 Search Engine Optimization (SEO) 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🔎 Search Engine Optimization (SEO)">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#server-side-rendering-ssr" class="md-nav__link">
    <span class="md-ellipsis">
      Server side rendering (SSR)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#client-side" class="md-nav__link">
    <span class="md-ellipsis">
      Client side
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#faq" class="md-nav__link">
    <span class="md-ellipsis">
      🤔 FAQ 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#contributing" class="md-nav__link">
    <span class="md-ellipsis">
      🙇‍ Contributing 
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../readme_zh/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Readme zh
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
        
          
          <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    PublishedArticle
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_6">
            <span class="md-nav__icon md-icon"></span>
            PublishedArticle
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../PublishedArticle/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    已发布文章
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
        
          
          <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    SoftWareUsage
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_7">
            <span class="md-nav__icon md-icon"></span>
            SoftWareUsage
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../SoftWareUsage/edge%E4%BD%BF%E7%94%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Edge使用
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../SoftWareUsage/freefileSync%E6%96%87%E4%BB%B6%E5%90%8C%E6%AD%A5%E4%B8%8E%E5%A4%87%E4%BB%BD%E5%B7%A5%E5%85%B7/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    FreeFileSync文件同步与备份工具
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../SoftWareUsage/vs%20%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Vs 快捷键
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" >
        
          
          <label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    UniversityStudy
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_8">
            <span class="md-nav__icon md-icon"></span>
            UniversityStudy
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../UniversityStudy/%E5%A4%A7%E5%AD%A6%E5%AD%A6%E4%B9%A0%E9%93%81%E5%BE%8B/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    大学学习（至少是大一到大四）永远要干的事情
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../UniversityStudy/%E5%A6%82%E4%BD%95%E4%BC%98%E9%9B%85%E7%9A%84%E8%AE%B2%E8%A7%A3%E7%9F%A5%E8%AF%86/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    如何优雅的讲解知识
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../UniversityStudy/%E6%AF%95%E4%B8%9A%E7%AD%94%E8%BE%A9/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    毕业答辩
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" >
        
          
          <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    WindowsOS
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_9">
            <span class="md-nav__icon md-icon"></span>
            WindowsOS
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/OS%E7%94%B5%E8%84%91%E6%B8%85%E7%90%86%E4%B8%8E%E7%B3%BB%E7%BB%9F%E9%87%8D%E8%A3%85/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    装机前的电脑备份工作
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/Windows%E7%A3%81%E7%9B%98%E7%AE%A1%E7%90%86%EF%BC%9A%E5%88%A0%E9%99%A4%E5%88%86%E5%8C%BA/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Windows磁盘管理：删除不需要的分区（恢复分区等）
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/Windows%E7%B3%BB%E7%BB%9F%E7%9B%98%E6%96%87%E4%BB%B6%E7%9B%AE%E5%BD%95%E4%BB%8B%E7%BB%8D/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Windows系统盘文件目录介绍
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/%5BWindows%5D%E7%B3%BB%E7%BB%9F%E4%BF%9D%E6%8A%A4%EF%BC%9A%E5%8D%A0%E7%94%A8%E7%A3%81%E7%9B%98100G%E7%9A%84%E7%BD%AA%E9%AD%81%E7%A5%B8%E9%A6%96---CD%E7%9B%98%E6%97%A0%E6%95%85%E5%8D%A0%E7%94%A8%E5%86%85%E5%AD%98%28%E7%A1%AC%E7%9B%98%29%E7%A9%BA%E9%97%B4%E5%8E%9F%E5%9B%A0/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    系统保护:占用磁盘100G的罪魁祸首---C/D盘无故占用内存(硬盘)空间原因
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/regedit/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Regedit
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/windows%E5%AD%A6%E4%B9%A0%E4%B8%8E%E4%BD%BF%E7%94%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Windows学习与使用
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/windows%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Windows快捷键
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/%E9%87%8D%E8%A3%85%E7%B3%BB%E7%BB%9F%20%26%20%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    重装系统 & 重装前的准备工作
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/%E9%9A%90%E8%97%8F%E6%96%87%E4%BB%B6/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    隐藏文件
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9_10" >
        
          
          <label class="md-nav__link" for="__nav_9_10" id="__nav_9_10_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    清理备份日志
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_9_10_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_9_10">
            <span class="md-nav__icon md-icon"></span>
            清理备份日志
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/%E6%B8%85%E7%90%86%E5%A4%87%E4%BB%BD%E6%97%A5%E5%BF%97/OS%E7%94%B5%E8%84%91%E6%B8%85%E7%90%86%E4%B8%8E%E7%B3%BB%E7%BB%9F%E9%87%8D%E8%A3%85/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    装机前的电脑备份工作
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../WindowsOS/%E6%B8%85%E7%90%86%E5%A4%87%E4%BB%BD%E6%97%A5%E5%BF%97/%E7%B3%BB%E7%BB%9F%E9%87%8D%E8%A3%85%E4%B8%8B%E8%BD%BD%E7%9A%84%E8%BD%AF%E4%BB%B6%E5%8F%8A%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    系统重装下载的软件及相关操作
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" >
        
          
          <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Utils 实用工具表
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_10">
            <span class="md-nav__icon md-icon"></span>
            Utils 实用工具表
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../utils_%E5%AE%9E%E7%94%A8%E5%B7%A5%E5%85%B7%E8%A1%A8/ASCII%E7%A0%81%E8%A1%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    ASCII码表
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_11" >
        
          
          <label class="md-nav__link" for="__nav_11" id="__nav_11_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    常用外设、传感器
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_11_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_11">
            <span class="md-nav__icon md-icon"></span>
            常用外设、传感器
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/3%E8%89%B2RGB/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    跑马灯
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/DS18b20%E6%B8%A9%E6%B9%BF%E5%BA%A6/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    快速上手
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E4%B8%B2%E5%8F%A3%E7%9B%B8%E5%85%B3/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    串口相关
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E4%BF%A1%E5%8F%B7%E7%81%AF%E6%8E%A7%E5%88%B6%E7%B1%BB/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    合集内容:信号灯控制类
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E5%A4%A7%E5%B0%8F%E7%A3%81%E7%B0%A7_%E7%A3%81%E5%9C%BA%E4%BC%A0%E6%84%9F%E5%99%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    大小磁簧 磁场传感器
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E5%BE%AA%E8%BF%B9%E6%A8%A1%E5%9D%97/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    循迹模块
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E6%8C%89%E9%94%AE%E5%BC%80%E5%85%B3/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    按键开关
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E6%95%B0%E5%AD%97%E6%B8%A9%E5%BA%A6%EF%BC%88%E6%B2%A1%E7%8E%A9%E6%98%8E%E7%99%BD%EF%BC%89/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    数字温度（没玩明白）
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E6%95%B2%E5%87%BB%E6%A8%A1%E5%9D%97/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    敲击模块
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E6%B8%B8%E6%88%8F%E6%91%87%E6%9D%86%E6%A8%A1%E5%9D%97/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    游戏摇杆模块
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E6%BF%80%E5%85%89%E5%8F%91%E5%B0%84%E5%99%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    激光发射器
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E8%9C%82%E9%B8%A3%E5%99%A8%E7%B1%BB/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    蜂鸣器类
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E5%B8%B8%E7%94%A8%E5%A4%96%E8%AE%BE%E3%80%81%E4%BC%A0%E6%84%9F%E5%99%A8/%E8%A7%A6%E6%91%B8%E4%BC%A0%E6%84%9F%E5%99%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    触摸传感器
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_12" >
        
          
          <label class="md-nav__link" for="__nav_12" id="__nav_12_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    考研docs（tmp）
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_12_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_12">
            <span class="md-nav__icon md-icon"></span>
            考研docs（tmp）
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E8%80%83%E7%A0%94docs%EF%BC%88tmp%EF%BC%89/%E8%80%83%E7%A0%94%E4%B8%AD%E5%9C%BA%E7%9F%AD%E6%9C%9F%E8%A7%84%E5%88%92-%E6%97%B6%E9%97%B4%E8%A1%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    时间表
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../%E8%80%83%E7%A0%94docs%EF%BC%88tmp%EF%BC%89/%E8%80%83%E7%A0%94%E4%B8%AD%E5%9C%BA%E7%9F%AD%E6%9C%9F%E8%A7%84%E5%88%92/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    考研知识扫盲及短期、长期规划
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#table-of-contents" class="md-nav__link">
    <span class="md-ellipsis">
      📝 Table of Contents
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#demo" class="md-nav__link">
    <span class="md-ellipsis">
      🤯 Demo 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#prerequisites" class="md-nav__link">
    <span class="md-ellipsis">
      ✅ Prerequisites 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#install" class="md-nav__link">
    <span class="md-ellipsis">
      ⬇️ Install 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#setup" class="md-nav__link">
    <span class="md-ellipsis">
      🛠 Setup 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🛠 Setup">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#intersectionobserver" class="md-nav__link">
    <span class="md-ellipsis">
      IntersectionObserver
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scroll-listener" class="md-nav__link">
    <span class="md-ellipsis">
      Scroll listener
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#usages" class="md-nav__link">
    <span class="md-ellipsis">
      🖼 Usages 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🖼 Usages">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#background-images" class="md-nav__link">
    <span class="md-ellipsis">
      Background images
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#responsive-images" class="md-nav__link">
    <span class="md-ellipsis">
      Responsive images
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#loading-image-path-async" class="md-nav__link">
    <span class="md-ellipsis">
      Loading image path async
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#custom-observable" class="md-nav__link">
    <span class="md-ellipsis">
      Custom observable
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ionic" class="md-nav__link">
    <span class="md-ellipsis">
      Ionic
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#debug" class="md-nav__link">
    <span class="md-ellipsis">
      🐛 Debug 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#css" class="md-nav__link">
    <span class="md-ellipsis">
      💅 CSS 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#api" class="md-nav__link">
    <span class="md-ellipsis">
      🔄 API 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🔄 API">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#lazyload" class="md-nav__link">
    <span class="md-ellipsis">
      lazyLoad
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#defaultimage-optional" class="md-nav__link">
    <span class="md-ellipsis">
      defaultImage (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#errorimage-optional" class="md-nav__link">
    <span class="md-ellipsis">
      errorImage (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#offset-optional" class="md-nav__link">
    <span class="md-ellipsis">
      offset (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scrolltarget-optional" class="md-nav__link">
    <span class="md-ellipsis">
      scrollTarget (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#customobservable-optional" class="md-nav__link">
    <span class="md-ellipsis">
      customObservable (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#usesrcset-optional" class="md-nav__link">
    <span class="md-ellipsis">
      useSrcset (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#decode-optional" class="md-nav__link">
    <span class="md-ellipsis">
      decode (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#debug-optional" class="md-nav__link">
    <span class="md-ellipsis">
      debug (optional)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#events" class="md-nav__link">
    <span class="md-ellipsis">
      Events
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Events">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#onstatechange-optional" class="md-nav__link">
    <span class="md-ellipsis">
      onStateChange (optional) 
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#hooks" class="md-nav__link">
    <span class="md-ellipsis">
      🎣 Hooks 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🎣 Hooks">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#getobservable" class="md-nav__link">
    <span class="md-ellipsis">
      getObservable
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isvisible" class="md-nav__link">
    <span class="md-ellipsis">
      isVisible
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#loadimage" class="md-nav__link">
    <span class="md-ellipsis">
      loadImage
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#setloadedimage" class="md-nav__link">
    <span class="md-ellipsis">
      setLoadedImage
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#seterrorimage" class="md-nav__link">
    <span class="md-ellipsis">
      setErrorImage
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#setup_1" class="md-nav__link">
    <span class="md-ellipsis">
      setup
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#finally" class="md-nav__link">
    <span class="md-ellipsis">
      finally
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isbot" class="md-nav__link">
    <span class="md-ellipsis">
      isBot
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isdisabled" class="md-nav__link">
    <span class="md-ellipsis">
      isDisabled
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#skiplazyloading" class="md-nav__link">
    <span class="md-ellipsis">
      skipLazyLoading
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#onattributechange" class="md-nav__link">
    <span class="md-ellipsis">
      onAttributeChange
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ondestroy" class="md-nav__link">
    <span class="md-ellipsis">
      onDestroy
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#search-engine-optimization-seo" class="md-nav__link">
    <span class="md-ellipsis">
      🔎 Search Engine Optimization (SEO) 
    </span>
  </a>
  
    <nav class="md-nav" aria-label="🔎 Search Engine Optimization (SEO)">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#server-side-rendering-ssr" class="md-nav__link">
    <span class="md-ellipsis">
      Server side rendering (SSR)
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#client-side" class="md-nav__link">
    <span class="md-ellipsis">
      Client side
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#faq" class="md-nav__link">
    <span class="md-ellipsis">
      🤔 FAQ 
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#contributing" class="md-nav__link">
    <span class="md-ellipsis">
      🙇‍ Contributing 
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  


<p><img name='项目logo/主题/等等' src="readme_en.assets/dancehole.jpg" alt="dancehole" style="zoom: 25%;" /></p>
<h1 align="center">项目标题：优雅的readme模板</h1>

<blockquote>
<p>来自shields.io的开源信息等等<a href="https://shields.io/badges">Static Badge | Shields.io</a></p>
</blockquote>
<p><a href="https://read.youdao.com#/home"><img src="https://img.shields.io/badge/try%20online-read.youdao.com-purple"></a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-yellow"></a></p>
<p><a href="https://twitter.com/YDopensource"><img src="https://img.shields.io/badge/follow-%40YDOpenSource-1DA1F2?logo=twitter&style={style}"></a></p>
<p align="center">
  一个完整的像模像样的开源项目，这里是项目简介
</p>

<h2 id="table-of-contents">📝 Table of Contents<a class="headerlink" href="#table-of-contents" title="Permanent link">&para;</a></h2>
<ul>
<li><a href="#demo">Demo</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#install">Install</a></li>
<li><a href="#libsetup">Setup</a></li>
<li><a href="#usages">Usages</a></li>
<li><a href="#debug">Debug</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#api">API</a></li>
<li><a href="#hooks">Hooks</a></li>
<li><a href="#seo">Search Engine Optimization (SEO)</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contributing">Contributing</a></li>
</ul>
<h2 id="demo">🤯 Demo <a name = "demo"></a><a class="headerlink" href="#demo" title="Permanent link">&para;</a></h2>
<p>Visit this site: <a href="https://naughty-bose-ec1cfc.netlify.com">https://naughty-bose-ec1cfc.netlify.com</a></p>
<h2 id="prerequisites">✅ Prerequisites <a name = "prerequisites"></a><a class="headerlink" href="#prerequisites" title="Permanent link">&para;</a></h2>
<p>The browser you are targeting need to have support of <code>WeakMap</code> and <code>String.prototype.includes</code>. If you need to support an older browser (like IE) you will need to include polyfill for <code>WeakMap</code> and <code>String.prototype.includes</code> (see <a href="https://github.com/zloirock/core-js">https://github.com/zloirock/core-js</a> for example).</p>
<p>Make also sure to inclue a pollyfill for <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">IntersectionObserver</a> if you need to target IE and want to use IntersectionObserver: <a href="https://github.com/w3c/IntersectionObserver/tree/master/polyfill">https://github.com/w3c/IntersectionObserver/tree/master/polyfill</a></p>
<h2 id="install">⬇️ Install <a name = "install"></a><a class="headerlink" href="#install" title="Permanent link">&para;</a></h2>
<p>To install the package, just run:</p>
<div class="highlight"><pre><span></span><code>$ npm install ng-lazyload-image
</code></pre></div>
<p>or the following if you are using yarn</p>
<div class="highlight"><pre><span></span><code>$ yarn add ng-lazyload-image
</code></pre></div>
<h2 id="setup">🛠 Setup <a name = "libsetup"></a><a class="headerlink" href="#setup" title="Permanent link">&para;</a></h2>
<p>Include the library in your module (see <a href="https://github.com/tjoskar/ng-lazyload-image/blob/master/example/src/app/app.module.ts">app.module.ts</a>):</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NgModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/core&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">BrowserModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/platform-browser&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span><span class="w"> </span><span class="c1">// &lt;-- import it</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">AppComponent</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;./app.component&#39;</span><span class="p">;</span>

<span class="err">@</span><span class="nx">NgModule</span><span class="p">({</span>
<span class="w">  </span><span class="nx">declarations</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="w">  </span><span class="nx">imports</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">BrowserModule</span><span class="p">,</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">],</span><span class="w"> </span><span class="c1">// &lt;-- and include it</span>
<span class="w">  </span><span class="nx">bootstrap</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="p">})</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">MyAppModule</span><span class="w"> </span><span class="p">{}</span>
</code></pre></div>
<h3 id="intersectionobserver">IntersectionObserver<a class="headerlink" href="#intersectionobserver" title="Permanent link">&para;</a></h3>
<p><code>ng-lazyload-image</code> is using a intersection observer by default so you don't need to do anything if you want to continue using the intersection observer as event emitter.</p>
<h3 id="scroll-listener">Scroll listener<a class="headerlink" href="#scroll-listener" title="Permanent link">&para;</a></h3>
<p>You can easily swtich from IntersectionObserver to scroll listener by using the <code>scrollHooks</code>:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NgModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/core&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">BrowserModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/platform-browser&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">,</span><span class="w"> </span><span class="nx">LAZYLOAD_IMAGE_HOOKS</span><span class="p">,</span><span class="w"> </span><span class="nx">ScrollHooks</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span><span class="w"> </span><span class="c1">// &lt;-- include ScrollHooks</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">AppComponent</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;./app.component&#39;</span><span class="p">;</span>

<span class="err">@</span><span class="nx">NgModule</span><span class="p">({</span>
<span class="w">  </span><span class="nx">declarations</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="w">  </span><span class="nx">imports</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">BrowserModule</span><span class="p">,</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">],</span>
<span class="w">  </span><span class="nx">providers</span><span class="o">:</span><span class="w"> </span><span class="p">[{</span><span class="w"> </span><span class="nx">provide</span><span class="o">:</span><span class="w"> </span><span class="nx">LAZYLOAD_IMAGE_HOOKS</span><span class="p">,</span><span class="w"> </span><span class="nx">useClass</span><span class="o">:</span><span class="w"> </span><span class="nx">ScrollHooks</span><span class="w"> </span><span class="p">}],</span><span class="w"> </span><span class="c1">// &lt;-- Declare that you want to use ScrollHooks</span>
<span class="w">  </span><span class="nx">bootstrap</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="p">})</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">MyAppModule</span><span class="w"> </span><span class="p">{}</span>
</code></pre></div>
<p>See <a href="#hooks">hooks</a> below for more information.</p>
<h2 id="usages">🖼 Usages <a name = "usages"></a><a class="headerlink" href="#usages" title="Permanent link">&para;</a></h2>
<p>A simple usecase is to use a <code>img</code>-tag and give it the image to lazyload to <code>[lazyLoad]</code> and an optional default image to <code>[defaultImage]</code>. The default image will be shown while the "real" image is getting loaded.</p>
<p>Example:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Component</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/core&#39;</span><span class="p">;</span>

<span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
<span class="w">  </span><span class="nx">selector</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;image&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="sb">` &lt;img [defaultImage]=&quot;defaultImage&quot; [lazyLoad]=&quot;image&quot; /&gt; `</span><span class="p">,</span>
<span class="p">})</span>
<span class="kd">class</span><span class="w"> </span><span class="nx">ImageComponent</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">defaultImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://www.placecage.com/1000/1000&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">image</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="background-images">Background images<a class="headerlink" href="#background-images" title="Permanent link">&para;</a></h3>
<p>It also supports background images:</p>
<div class="highlight"><pre><span></span><code><span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
<span class="w">  </span><span class="nx">selector</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;image&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="sb">` &lt;div [defaultImage]=&quot;defaultImage&quot; [lazyLoad]=&quot;image&quot;&gt;&lt;/div&gt; `</span><span class="p">,</span>
<span class="p">})</span>
<span class="kd">class</span><span class="w"> </span><span class="nx">ImageComponent</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">defaultImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://www.placecage.com/1000/1000&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">image</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="responsive-images">Responsive images<a class="headerlink" href="#responsive-images" title="Permanent link">&para;</a></h3>
<p>If using responsive images in a plain <code>&lt;img&gt;</code> tag, you'll need to set the <code>useSrcset</code> attribute to <code>true</code>:</p>
<div class="highlight"><pre><span></span><code><span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
<span class="w">  </span><span class="nx">selector</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;image&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="sb">` &lt;img [defaultImage]=&quot;defaultImage&quot; [lazyLoad]=&quot;images&quot; [useSrcset]=&quot;true&quot; /&gt; `</span><span class="p">,</span>
<span class="p">})</span>
<span class="kd">class</span><span class="w"> </span><span class="nx">ImageComponent</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">defaultImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://www.placecage.com/1000/1000&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">images</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,</span>
<span class="sb">            https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>If using responsive images in a <code>&lt;picture&gt;</code> tag, set the default <code>&lt;img&gt;</code> tag as usual with <code>lazyLoad</code> etc. attributes.<br />
You can use <code>attr.lazyLoad</code>, <code>attr.defaultImage</code> and <code>attr.errorImage</code> attributes for <code>&lt;source&gt;</code> elements.<br />
There's no need to set <code>useSrcset</code> for <code>&lt;source&gt;</code> elements, as <code>srcset</code> is used by default.<br />
A simple example for a <code>&lt;picture&gt;</code> tag:</p>
<div class="highlight"><pre><span></span><code><span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
<span class="w">  </span><span class="nx">selector</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;image&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="sb">`</span>
<span class="sb">    &lt;picture&gt;</span>
<span class="sb">      &lt;source media=&quot;(min-width: {{ screen_lg }})&quot; [attr.defaultImage]=&quot;defaultImage&quot; [attr.lazyLoad]=&quot;image2&quot; /&gt;</span>
<span class="sb">      &lt;source media=&quot;(min-width: {{ screen_md }})&quot; [attr.defaultImage]=&quot;defaultImage&quot; [attr.lazyLoad]=&quot;image3&quot; /&gt;</span>
<span class="sb">      &lt;img [defaultImage]=&quot;defaultImage&quot; [lazyLoad]=&quot;image1&quot; /&gt;</span>
<span class="sb">    &lt;/picture&gt;</span>
<span class="sb">  `</span><span class="p">,</span>
<span class="p">})</span>
<span class="kd">class</span><span class="w"> </span><span class="nx">ImageComponent</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">screen_lg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;1200px&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">screen_md</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;992px&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">defaultImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://www.placecage.com/1000/1000&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">image1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://images.unsplash.com/photo-1422004707501-e8dad229e17a?fm=jpg&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">image2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://images.unsplash.com/photo-1439931444800-9bcc83f804a6?fm=jpg&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="nx">image3</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://images.unsplash.com/photo-1417128281290-30a42da46277?fm=jpg&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="loading-image-path-async">Loading image path async<a class="headerlink" href="#loading-image-path-async" title="Permanent link">&para;</a></h3>
<p>You can load image async or change the url on the fly, eg.</p>
<div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">img</span> <span class="err">[</span><span class="na">lazyLoad</span><span class="err">]=&quot;</span><span class="na">image</span><span class="err">$</span> <span class="err">|</span> <span class="na">async</span><span class="err">&quot;</span> <span class="p">/&gt;</span>
</code></pre></div>
<h3 id="custom-observable">Custom observable<a class="headerlink" href="#custom-observable" title="Permanent link">&para;</a></h3>
<p>Sometimes you want to get more controll over when the we should check if the image is in viewport. <code>customObservable</code> let's you create your own observable.</p>
<p>This will change the functionality of <em>when</em> we chek if the image is in the viewport. It does not change the functionality of <em>how</em> to detect if an image is in the viewport or not. Meaning: if you are using IntersectionObserver (default), it is important that the obserer that you pass to <code>customObservable</code> will emit objects that looks like: <code>{ isIntersecting: boolean }</code>. You can change this behavior by implementing your own <code>isVisible</code> (see <a href="#hooks">hooks</a> below for more information).</p>
<p>If you are using the ScrollHooks-preset, you can just pass <code>customObservable</code> and the reset will be handle automatically.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">merge</span><span class="p">,</span><span class="w"> </span><span class="nx">fromEvent</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;rxjs&#39;</span>

<span class="p">...</span>

<span class="kr">constructor</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="k">this</span><span class="p">.</span><span class="nx">scroll$</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">merge</span><span class="p">(</span>
<span class="w">    </span><span class="nx">fromEvent</span><span class="p">(</span><span class="nb">window</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;scroll&#39;</span><span class="p">),</span>
<span class="w">    </span><span class="nx">fromEvent</span><span class="p">(</span><span class="nx">someDivRef</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;scroll&#39;</span><span class="p">)</span>
<span class="w">  </span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">img</span> <span class="err">[</span><span class="na">customObservable</span><span class="err">]=&quot;</span><span class="na">scroll</span><span class="err">$&quot;</span> <span class="err">...</span> <span class="p">/&gt;</span>
</code></pre></div>
<h3 id="ionic">Ionic<a class="headerlink" href="#ionic" title="Permanent link">&para;</a></h3>
<p>If you are using Ionic and <strong>don't</strong> want to use IntersectionObserver, you may need to include your own scroll observable or change the scroll target. For instans if you want to have multiple scroll targets:</p>
<div class="highlight"><pre><span></span><code><span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
<span class="w">  </span><span class="nx">selector</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;page-image&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="sb">`</span>
<span class="sb">    &lt;ion-content #container padding&gt;</span>
<span class="sb">      &lt;img [defaultImage]=&quot;https://www.placecage.com/1000/1000&quot; [lazyLoad]=&quot;lazyLoadImage&quot; [customObservable]=&quot;container.ionScroll&quot; /&gt;</span>
<span class="sb">    &lt;/ion-content&gt;</span>
<span class="sb">  `</span><span class="p">,</span>
<span class="p">})</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">AboutPage</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">lazyLoadImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://hd.unsplash.com/photo-1431400445088-1750c997c6b5&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>In case of using ion-slides in Ionic 2+, you can include your own scroll observable as below.</p>
<div class="highlight"><pre><span></span><code><span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
<span class="w">  </span><span class="nx">selector</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;page-image&#39;</span><span class="p">,</span>
<span class="w">  </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="sb">`</span>
<span class="sb">    &lt;ion-content #container padding&gt;</span>
<span class="sb">      &lt;img [defaultImage]=&quot;https:  //www.placecage.com/1000/1000&quot; [lazyLoad]=&quot;lazyLoadImage&quot; [customObservable]=&quot;container.ionSlideWillChange&quot; /&gt;</span>
<span class="sb">    &lt;/ion-content&gt;</span>
<span class="sb">  `</span><span class="p">,</span>
<span class="p">})</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">AboutPage</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">lazyLoadImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;https://hd.unsplash.com/photo-1431400445088-1750c997c6b5&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="debug">🐛 Debug <a name = "debug"></a><a class="headerlink" href="#debug" title="Permanent link">&para;</a></h2>
<p>In order to get a better understanding of what is happening you can pass <code>[debug]="true"</code> which will output some debug information in the web console.</p>
<p>See <a href="#onStateChange">onStateChange</a> for more information about the diffrent output messages.</p>
<h2 id="css">💅 CSS <a name = "css"></a><a class="headerlink" href="#css" title="Permanent link">&para;</a></h2>
<p>The css class name <code>ng-lazyloading</code> will automatically be added before the image is loaded and will be removed when the image has been loaded or if the image couldn't be loaded.</p>
<p>The css class name <code>ng-lazyloaded</code> will be added when the image is loaded (regardless of if the image could be loaded or not).</p>
<p>The css class name <code>ng-failed-lazyloaded</code> will be added when the image couldn't be loaded.</p>
<h2 id="api">🔄 API <a name = "api"></a><a class="headerlink" href="#api" title="Permanent link">&para;</a></h2>
<h5 id="lazyload">lazyLoad<a class="headerlink" href="#lazyload" title="Permanent link">&para;</a></h5>
<p>Type: <code>string</code></p>
<p>Example: <code>https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg</code></p>
<p>The image to be lazy loaded. This image will replace the default image (<code>defaultImage</code>).</p>
<div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">img</span> <span class="err">[</span><span class="na">defaultImage</span><span class="err">]=&quot;&#39;</span><span class="na">https:</span><span class="err">//</span><span class="na">www</span><span class="err">.</span><span class="na">placecage</span><span class="err">.</span><span class="na">com</span><span class="err">/</span><span class="na">1000</span><span class="err">/</span><span class="na">1000</span><span class="err">&#39;&quot;</span> <span class="err">[</span><span class="na">lazyLoad</span><span class="err">]=&quot;&#39;</span><span class="na">https:</span><span class="err">//</span><span class="na">hd</span><span class="err">.</span><span class="na">unsplash</span><span class="err">.</span><span class="na">com</span><span class="err">/</span><span class="na">photo-1431400445088-1750c997c6b5</span><span class="err">&#39;&quot;</span> <span class="p">/&gt;</span>
</code></pre></div>
<h5 id="defaultimage-optional">defaultImage (optional)<a class="headerlink" href="#defaultimage-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>string</code></p>
<p>Example: <code>https://www.placecage.com/1000/1000</code></p>
<p>Path to default image. This image will be loaded right away.</p>
<p>You can also use <code>src</code> attribute for img tag to define default image:<br />
<code>&lt;img src="https://www.placecage.com/1000/1000" [lazyLoad]="lazyLoadImage" /&gt;</code></p>
<p>or <code>background-image</code> property for non-image tags:<br />
<code>&lt;div style="background-image: url('https://www.placecage.com/1000/1000');" [lazyLoad]="lazyLoadImage"&gt;&lt;/div&gt;</code></p>
<h5 id="errorimage-optional">errorImage (optional)<a class="headerlink" href="#errorimage-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>string</code></p>
<p>Example: <code>https://i.imgur.com/XkU4Ajf.png</code></p>
<p>An image to be loaded if failing to load <code>lazyLoad</code>. Will load the default image (<code>defaultImage</code>) if absent.</p>
<div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">img</span> <span class="err">[</span><span class="na">defaultImage</span><span class="err">]=&quot;</span><span class="na">someDefaultImage</span><span class="err">&quot;</span> <span class="err">[</span><span class="na">lazyLoad</span><span class="err">]=&quot;</span><span class="na">imageToLazyLoad</span><span class="err">&quot;</span> <span class="err">[</span><span class="na">errorImage</span><span class="err">]=&quot;</span><span class="na">imageToShowOnError</span><span class="err">&quot;</span> <span class="p">/&gt;</span>
</code></pre></div>
<h5 id="offset-optional">offset (optional)<a class="headerlink" href="#offset-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>number</code></p>
<p>Example: <code>100</code></p>
<p>Default: <code>0</code></p>
<p>Number of px a image should be loaded before it is in view port</p>
<div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">img</span> <span class="err">[</span><span class="na">defaultImage</span><span class="err">]=&quot;</span><span class="na">someDefaultImage</span><span class="err">&quot;</span> <span class="err">[</span><span class="na">lazyLoad</span><span class="err">]=&quot;</span><span class="na">imageToLazyLoad</span><span class="err">&quot;</span> <span class="err">[</span><span class="na">offset</span><span class="err">]=&quot;</span><span class="na">100</span><span class="err">&quot;</span> <span class="p">/&gt;</span>
</code></pre></div>
<h5 id="scrolltarget-optional">scrollTarget (optional)<a class="headerlink" href="#scrolltarget-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>Element</code></p>
<p>Example: <code>document.getElementById('my-scroll-container')</code></p>
<p>Default: <code>window</code></p>
<p>You will need to set this property if you are using a scroll container and do not propagate the scroll event to window.</p>
<h5 id="customobservable-optional">customObservable (optional)<a class="headerlink" href="#customobservable-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>Observable</code></p>
<p>Example: <code>Observable.fromEvent(myScrollContainer, 'scroll')</code></p>
<p>You can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic. See <a href="#custom-observable">Custom Observable</a> for more information.</p>
<h5 id="usesrcset-optional">useSrcset (optional)<a class="headerlink" href="#usesrcset-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>boolean</code></p>
<p>Example: <code>true</code></p>
<p>You can set this to <code>true</code> if you need to lazy load images with <code>srcset</code> attribute, instead of <code>src</code>.<br />
<code>&lt;source&gt;</code> tags are set to use <code>srcset</code> by default, so you don't need to set this option additionaly.</p>
<h5 id="decode-optional">decode (optional)<a class="headerlink" href="#decode-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>boolean</code></p>
<p>Example: <code>true</code></p>
<p>You can set this to <code>true</code>, the image will be <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode">decoded</a> before inserted into the DOM. This can be useful for large images.</p>
<h5 id="debug-optional">debug (optional)<a class="headerlink" href="#debug-optional" title="Permanent link">&para;</a></h5>
<p>type: <code>boolean</code></p>
<p>Exaple: <code>true</code></p>
<p>See <a href="#debug">debug</a> for more information.</p>
<h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link">&para;</a></h3>
<h5 id="onstatechange-optional">onStateChange (optional) <a name = "onStateChange"></a><a class="headerlink" href="#onstatechange-optional" title="Permanent link">&para;</a></h5>
<p>Type: <code>Function: (event: StateChange) =&gt; void</code></p>
<p>Example: <code>&lt;img [lazyLoad]="lazyLoadImage" (onStateChange)="myCallbackFunction($event)"&gt;</code></p>
<p>You can pass a callback function, which will be called when the image is getting into different state.</p>
<div class="highlight"><pre><span></span><code><span class="nx">myCallbackFunction</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">StateChange</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">reason</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;setup&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The lib has been instantiated but we have not done anything yet.</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;observer-emit&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The image observer (intersection/scroll/custom observer) has emit a value so we</span>
<span class="w">      </span><span class="c1">// should check if the image is in the viewport.</span>
<span class="w">      </span><span class="c1">// `event.data` is the event in this case.</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;start-loading&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The image is in the viewport so the image will start loading</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;mount-image&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The image has been loaded successfully so lets put it into the DOM</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;loading-succeeded&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The image has successfully been loaded and placed into the DOM</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;loading-failed&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The image could not be loaded for some reason.</span>
<span class="w">      </span><span class="c1">// `event.data` is the error in this case</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">    </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;finally&#39;</span><span class="o">:</span>
<span class="w">      </span><span class="c1">// The last event before cleaning up</span>
<span class="w">      </span><span class="k">break</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="hooks">🎣 Hooks <a name = "hooks"></a><a class="headerlink" href="#hooks" title="Permanent link">&para;</a></h2>
<p>It is possible to hook into the loading process by create your own functions.</p>
<p>For example, let's say you want to fetch an image with some custom headers. If so, you can create a custom hook to fetch the image:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NgModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/core&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">BrowserModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/platform-browser&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">,</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">,</span><span class="w"> </span><span class="nx">LAZYLOAD_IMAGE_HOOKS</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">AppComponent</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;./app.component&#39;</span><span class="p">;</span>

<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">loadImage</span><span class="p">({</span><span class="w"> </span><span class="nx">imagePath</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o">&lt;</span><span class="kt">string</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">fetch</span><span class="p">(</span><span class="nx">imagePath</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nx">headers</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="nx">Authorization</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Bearer ...&#39;</span><span class="p">,</span>
<span class="w">      </span><span class="p">},</span>
<span class="w">    </span><span class="p">})</span>
<span class="w">      </span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">res</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">res</span><span class="p">.</span><span class="nx">blob</span><span class="p">())</span>
<span class="w">      </span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">blob</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">blob</span><span class="p">));</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>

<span class="kd">@NgModule</span><span class="p">({</span>
<span class="w">  </span><span class="nx">declarations</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="w">  </span><span class="nx">imports</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">BrowserModule</span><span class="p">,</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">],</span>
<span class="w">  </span><span class="nx">providers</span><span class="o">:</span><span class="w"> </span><span class="p">[{</span><span class="w"> </span><span class="nx">provide</span><span class="o">:</span><span class="w"> </span><span class="kt">LAZYLOAD_IMAGE_HOOKS</span><span class="p">,</span><span class="w"> </span><span class="nx">useClass</span><span class="o">:</span><span class="w"> </span><span class="kt">LazyLoadImageHooks</span><span class="w"> </span><span class="p">}],</span>
<span class="w">  </span><span class="nx">bootstrap</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="p">})</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">MyAppModule</span><span class="w"> </span><span class="p">{}</span>
</code></pre></div>
<p>You can even use other services by inject them. Lets say you want to use Angulars https class instead of <code>window.fetch</code>:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NgModule</span><span class="p">,</span><span class="w"> </span><span class="nx">Injectable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/core&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">BrowserModule</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/platform-browser&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">HttpClientModule</span><span class="p">,</span><span class="w"> </span><span class="nx">HttpClient</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/common/http&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">,</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">,</span><span class="w"> </span><span class="nx">LAZYLOAD_IMAGE_HOOKS</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Observable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;rxjs&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">map</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;rxjs/operators&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">AppComponent</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;./app.component&#39;</span><span class="p">;</span>

<span class="kd">@Injectable</span><span class="p">()</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="k">private</span><span class="w"> </span><span class="nx">http</span><span class="o">:</span><span class="w"> </span><span class="kt">HttpClient</span><span class="p">;</span>

<span class="w">  </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">http</span><span class="o">:</span><span class="w"> </span><span class="kt">HttpClient</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">super</span><span class="p">();</span>
<span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">http</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">http</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="nx">loadImage</span><span class="p">({</span><span class="w"> </span><span class="nx">imagePath</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nx">Observable</span><span class="o">&lt;</span><span class="kt">string</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// Load the image through `HttpClient` and cancel the request if the user change page or the image gets removed</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">imagePath</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">responseType</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;blob&#39;</span><span class="w"> </span><span class="p">}).</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">map</span><span class="p">(</span><span class="nx">blob</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">blob</span><span class="p">)));</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>

<span class="kd">@NgModule</span><span class="p">({</span>
<span class="w">  </span><span class="nx">declarations</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="w">  </span><span class="nx">imports</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">BrowserModule</span><span class="p">,</span><span class="w"> </span><span class="nx">HttpClientModule</span><span class="p">,</span><span class="w"> </span><span class="nx">LazyLoadImageModule</span><span class="p">],</span>
<span class="w">  </span><span class="nx">providers</span><span class="o">:</span><span class="w"> </span><span class="p">[{</span><span class="w"> </span><span class="nx">provide</span><span class="o">:</span><span class="w"> </span><span class="kt">LAZYLOAD_IMAGE_HOOKS</span><span class="p">,</span><span class="w"> </span><span class="nx">useClass</span><span class="o">:</span><span class="w"> </span><span class="kt">LazyLoadImageHooks</span><span class="w"> </span><span class="p">}],</span>
<span class="w">  </span><span class="nx">bootstrap</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">AppComponent</span><span class="p">],</span>
<span class="p">})</span>
<span class="k">export</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">MyAppModule</span><span class="w"> </span><span class="p">{}</span>
</code></pre></div>
<p>The following hooks are supported:</p>
<h3 id="getobservable">getObservable<a class="headerlink" href="#getobservable" title="Permanent link">&para;</a></h3>
<p>Should return an observable that emits a new value every time <code>ng-lazyload-image</code> should check if the image is in viewport. It is important that the emited event is of the same type <code>isVisible</code> expects.</p>
<p>Eg.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">,</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">getObservable</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// Will emit `{ isIntersecting: true }` every second.</span>
<span class="w">    </span><span class="c1">// You will have to overwride `isVisible` if you want to pass another event</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">interval</span><span class="p">(</span><span class="mf">1000</span><span class="p">).</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">mapTo</span><span class="p">({</span><span class="w"> </span><span class="nx">isIntersecting</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="w"> </span><span class="p">})));</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>A more usefull example could be to add a debounce time so we only start loading the image if it has been in the view port for some time:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">,</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">debounceTime</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;rxjs/operators&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">getObservable</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// Only load the image if it has been in the viewport for one second</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="k">super</span><span class="p">.</span><span class="nx">getObservable</span><span class="p">(</span><span class="nx">attributes</span><span class="p">).</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">debounceTime</span><span class="p">(</span><span class="mf">1000</span><span class="p">))</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>See <a href="https://github.com/tjoskar/ng-lazyload-image/blob/master/src/intersection-observer-hooks/hooks.ts">intersection-listener.ts</a> for example.</p>
<p>See <code>isVisible</code> if you want to use your own event.</p>
<h3 id="isvisible">isVisible<a class="headerlink" href="#isvisible" title="Permanent link">&para;</a></h3>
<p>Function to check if the element is vissible.</p>
<p>Eg.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">,</span><span class="w"> </span><span class="nx">ScrollHooks</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">ScrollHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">isVisible</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">Event</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">element</span><span class="p">,</span><span class="w"> </span><span class="nx">scrollContainer</span><span class="p">,</span><span class="w"> </span><span class="nx">offset</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// `event` is form `getObservable`</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">isElementInViewport</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span><span class="w"> </span><span class="nx">scrollContainer</span><span class="p">,</span><span class="w"> </span><span class="nx">offset</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>If you want to create your own event, you can create both <code>getObservable</code> and <code>isVisible</code> by extend <code>SharedHooks</code>:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">,</span><span class="w"> </span><span class="nx">SharedHooks</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">SharedHooks</span><span class="o">&lt;</span><span class="kt">number</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span>

<span class="w">  </span><span class="nx">getObservable</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">interval</span><span class="p">(</span><span class="mf">1000</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="nx">isVisible</span><span class="p">(</span><span class="nx">event</span><span class="o">:</span><span class="w"> </span><span class="kt">number</span><span class="p">,</span><span class="w"> </span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// `event` is 0,1,2,3,4,5,...</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">isElementInViewport</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span><span class="w"> </span><span class="nx">scrollContainer</span><span class="p">,</span><span class="w"> </span><span class="nx">offset</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="loadimage">loadImage<a class="headerlink" href="#loadimage" title="Permanent link">&para;</a></h3>
<p>Function to load the image. It must return a path to the image (it can however be async, like the example below and/or return a observable).</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">loadImage</span><span class="p">({</span><span class="w"> </span><span class="nx">imagePath</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nb">Promise</span><span class="o">&lt;</span><span class="kt">string</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">fetch</span><span class="p">(</span><span class="nx">imagePath</span><span class="p">)</span>
<span class="w">      </span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">res</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">res</span><span class="p">.</span><span class="nx">blob</span><span class="p">())</span>
<span class="w">      </span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">blob</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">blob</span><span class="p">));</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>If you don't want to load the image but instead let the browser load it for you, then you can just return the imagePath (We will however not know if the image can't be loaded and the error image will not be used):</p>
<div class="highlight"><pre><span></span><code><span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">loadImage</span><span class="p">({</span><span class="w"> </span><span class="nx">imagePath</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="p">[</span><span class="nx">imagePath</span><span class="p">];</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="setloadedimage">setLoadedImage<a class="headerlink" href="#setloadedimage" title="Permanent link">&para;</a></h3>
<p>A function to set the image url to the DOM.</p>
<p>Eg.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">setLoadedImage</span><span class="p">({</span><span class="w"> </span><span class="nx">element</span><span class="p">,</span><span class="w"> </span><span class="nx">imagePath</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// `imagePath` comes from `loadImage`</span>
<span class="w">    </span><span class="nx">element</span><span class="p">.</span><span class="nx">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">imagePath</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="seterrorimage">setErrorImage<a class="headerlink" href="#seterrorimage" title="Permanent link">&para;</a></h3>
<p>This function will be called if the lazy image cant be loaded.</p>
<p>Eg.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">setErrorImage</span><span class="p">({</span><span class="w"> </span><span class="nx">element</span><span class="p">,</span><span class="w"> </span><span class="nx">errorImagePath</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">element</span><span class="p">.</span><span class="nx">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">errorImagePath</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="setup_1">setup<a class="headerlink" href="#setup_1" title="Permanent link">&para;</a></h3>
<p>This function will be called on setup. Can be useful for (re)setting css-classes and setting the default image.</p>
<p>This function will be called every time an attrebute is changing.</p>
<p>Eg.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">setup</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// Overwride the path to the default image for all lazyloaded images</span>
<span class="w">    </span><span class="nx">attributes</span><span class="p">.</span><span class="nx">defaultImagePath</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;some/path.jpg&#39;</span><span class="p">;</span>
<span class="w">    </span><span class="c1">// You can always call the base `setup` if you want to keep the default behavior</span>
<span class="w">    </span><span class="k">super</span><span class="p">.</span><span class="nx">setup</span><span class="p">(</span><span class="nx">attributes</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="finally">finally<a class="headerlink" href="#finally" title="Permanent link">&para;</a></h3>
<p>This function will be called on teardown. Can be useful for setting css-classes.</p>
<p>Eg.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="k">finally</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// So something</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="isbot">isBot<a class="headerlink" href="#isbot" title="Permanent link">&para;</a></h3>
<p>A function to check if the current user is a bot or not. Can be useful for SSR and SEO.</p>
<p>Default function:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/common&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">isBot</span><span class="p">(</span><span class="nx">attributes?</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// Check if the user is a bot or not.</span>
<span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">navigator</span><span class="p">;</span><span class="w"> </span><span class="c1">// Is the same as `window.navigator` if window is defined otherwise undefined.</span>
<span class="w">    </span><span class="nx">isPlatformServer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">platformId</span><span class="p">);</span><span class="w"> </span><span class="c1">// True if the code is running on the server</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>Both <code>IntersectionObserverHooks</code> and <code>ScrollHooks</code> will load the image as soon as possble if <code>isBot</code> returns <code>true</code>.</p>
<h3 id="isdisabled">isDisabled<a class="headerlink" href="#isdisabled" title="Permanent link">&para;</a></h3>
<p>A function to decided if the module should be disabled, meaning: it should not do anything, just exit right away, without loading any image. The default behavior is to disable it on the server if the user is not a bot:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/common&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">isDisabled</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// This is the same as: `return super.isDisabled();`</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">platformId</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isBot</span><span class="p">();</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="skiplazyloading">skipLazyLoading<a class="headerlink" href="#skiplazyloading" title="Permanent link">&para;</a></h3>
<p>A function to decided if we should load the image right away. This can be useful if you want to skip to lazyload the image when SSR:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/common&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">skipLazyLoading</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">platformId</span><span class="p">);</span><span class="w"> </span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>Or maybe you want to load the image ASAP from specific domains</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">skipLazyLoading</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">imageUrl</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">URL</span><span class="p">(</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">imagePath</span><span class="p">);</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">imageUrl</span><span class="p">.</span><span class="nx">hostname</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;example.org&#39;</span><span class="p">;</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>The default behavior for <code>skipLazyLoading</code> is to call <code>isBot</code>. Meaning: if the user is a bot, load the image right away, otherwise, lazyload the image.</p>
<h3 id="onattributechange">onAttributeChange<a class="headerlink" href="#onattributechange" title="Permanent link">&para;</a></h3>
<p>This function is called when some of the atrebute of the image is changed.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">onAttributeChange</span><span class="p">(</span><span class="nx">newAttributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`New attributes: </span><span class="si">${</span><span class="nx">newAttributes</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="ondestroy">onDestroy<a class="headerlink" href="#ondestroy" title="Permanent link">&para;</a></h3>
<p>This function is called when a image is loaded and the directive will unmount, aka. when <code>ngOnDestroy</code> is called in the directive. This can be useful if you want to do some cleanup.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">imageToBeLoaded</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Map</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="o">&gt;</span><span class="p">();</span>

<span class="w">  </span><span class="nx">onAttributeChange</span><span class="p">(</span><span class="nx">newAttributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`New attributes: </span><span class="si">${</span><span class="nx">newAttributes</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
<span class="w">    </span><span class="nx">imageToBeLoaded</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">newAttributes</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span><span class="w"> </span><span class="nx">newAttributes</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="nx">onDestroy</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nx">imageToBeLoaded</span><span class="p">.</span><span class="ow">delete</span><span class="p">(</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="search-engine-optimization-seo">🔎 Search Engine Optimization (SEO) <a name = "seo"></a><a class="headerlink" href="#search-engine-optimization-seo" title="Permanent link">&para;</a></h2>
<p><code>ng-lazyload-image</code> are using the following strategy by default:</p>
<h3 id="server-side-rendering-ssr">Server side rendering (SSR)<a class="headerlink" href="#server-side-rendering-ssr" title="Permanent link">&para;</a></h3>
<p>If the incoming request is from a bot; it will set <code>[lazyLoad]</code> to <code>src</code> on the image (letting the browser loading the image right away). Useful if the bot don't understand javascript.</p>
<p>If the request is not from a bot (or if we can't decide), don't do anything and let the client fix the images (see below).</p>
<p>You can chang this behavior by implementing your own <code>skipLazyLoading</code> function (see <code>skipLazyLoading</code> above). Let's say you always want to show the image ASAP for SSR, regardles of if the user is a bot or not:</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@angular/common&#39;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="p">,</span><span class="w"> </span><span class="nx">Attributes</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;ng-lazyload-image&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nx">LazyLoadImageHooks</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">IntersectionObserverHooks</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nx">skipLazyLoading</span><span class="p">(</span><span class="nx">attributes</span><span class="o">:</span><span class="w"> </span><span class="kt">Attributes</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="c1">// Skipping lazyloading the image for SSR</span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">isPlatformServer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">platformId</span><span class="p">);</span><span class="w"> </span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="client-side">Client side<a class="headerlink" href="#client-side" title="Permanent link">&para;</a></h3>
<ul>
<li>If the user is a bot (see <code>isBot</code> hook above), render all the images right away. (useful if the bot understand javascript)</li>
<li>If the user is not a bot (or if we can't decide), lazy load the images</li>
</ul>
<h2 id="faq">🤔 FAQ <a name = "faq"></a><a class="headerlink" href="#faq" title="Permanent link">&para;</a></h2>
<p><strong>Q</strong> How can I manually trigger the loading of images?</p>
<p><strong>A</strong> You can either use the <code>getObservable</code> hook if you can trigger the loading outside the dom or you can use the <code>customObservable</code> input, see <a href="#custom-observable">Custom Observable</a></p>
<p><strong>Q</strong> Does this library work with ionic or some other wrapper for Angular?</p>
<p><strong>A</strong> Yes, but ionic and some other library wraps the whole document inside an other div so you might need to create your own scroll listener.</p>
<p><strong>Q</strong> How can I add a transition effect between the default image and the lazy loaded image?</p>
<p><strong>A</strong> See: <a href="https://github.com/tjoskar/ng-lazyload-image/issues/300">https://github.com/tjoskar/ng-lazyload-image/issues/300</a></p>
<p><strong>Q</strong> It doesn't work with <code>BrowserAnimationsModule</code></p>
<p><strong>A</strong> Are you using the scroll preset? If so, take a look at this <a href="https://github.com/tjoskar/ng-lazyload-image/issues/438">issue</a>.</p>
<p><strong>Q</strong> Can I add a debounce time before loading the image?</p>
<p><strong>A</strong> Yes, take a look at this <a href="https://github.com/tjoskar/ng-lazyload-image/issues/456">issue</a>.</p>
<p><strong>Q</strong> Can I cancel image loading when the user change page?</p>
<p><strong>A</strong> Yes, take a look at this <a href="https://github.com/tjoskar/ng-lazyload-image/issues/458">issue</a>.</p>
<p><strong>Q</strong> I can't get it to work. Can you help me?</p>
<p><strong>A</strong> Sure, create an issue and describe your issue in as much detail as possible.</p>
<h2 id="contributing">🙇‍ Contributing <a name = "contributing"></a><a class="headerlink" href="#contributing" title="Permanent link">&para;</a></h2>
<p>See the <a href="CONTRIBUTING.md">contributing guide</a> </p>







  
    
  
  
    
  


  <aside class="md-source-file">
    
      
  <span class="md-source-file__fact">
    <span class="md-icon" title="最后更新">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg>
    </span>
    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">February 29, 2024</span>
  </span>

    
    
      
  <span class="md-source-file__fact">
    <span class="md-icon" title="创建日期">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.47 15.08 11 13V7h1.5v5.25l3.08 1.83c-.41.28-.79.62-1.11 1m-1.39 4.84c-.36.05-.71.08-1.08.08-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8c0 .37-.03.72-.08 1.08.69.1 1.33.32 1.92.64.1-.56.16-1.13.16-1.72 0-5.5-4.5-10-10-10S2 6.5 2 12s4.47 10 10 10c.59 0 1.16-.06 1.72-.16-.32-.59-.54-1.23-.64-1.92M18 15v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"/></svg>
    </span>
    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">February 29, 2024</span>
  </span>

    
    
    
  </aside>





                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
  回到页面顶部
</button>
        
      </main>
      
        <footer class="md-footer">
  
    
      
      <nav class="md-footer__inner md-grid" aria-label="页脚" >
        
          
          <a href="../../%E7%BB%BC%E5%90%88%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B/" class="md-footer__link md-footer__link--prev" aria-label="上一页: 应用实例：好看的主页">
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
            </div>
            <div class="md-footer__title">
              <span class="md-footer__direction">
                上一页
              </span>
              <div class="md-ellipsis">
                应用实例：好看的主页
              </div>
            </div>
          </a>
        
        
          
          <a href="../readme_zh/" class="md-footer__link md-footer__link--next" aria-label="下一页: Readme zh">
            <div class="md-footer__title">
              <span class="md-footer__direction">
                下一页
              </span>
              <div class="md-ellipsis">
                Readme zh
              </div>
            </div>
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
            </div>
          </a>
        
      </nav>
    
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright © dancehole邓仕昊 2023 - 2024 深圳技术大学
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-social">
  
    
    
    
    
      
      
    
    <a href="https://github.com/dancehole" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
    </a>
  
    
    
    
    
    <a href="mailto:<1391755954@qq.com>" target="_blank" rel="noopener" title="" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480v-83.6c0-4 1.5-7.8 4.2-10.7l167.6-182.9c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8l-88.3-44.2C7.1 311.3.3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.instant", "navigation.instant.prefetch", "toc.follow", "navigation.top", "search.suggest", "search.highlight", "navigation.footer"], "search": "../../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}}</script>
    
    
      <script src="../../../assets/javascripts/bundle.c8d2eff1.min.js"></script>
      
        <script src="../../../javascripts/extra.js"></script>
      
        <script src="../../../javascripts/mathjax.js"></script>
      
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
      
    
  </body>
</html>